<template>
    <div class="container">
        <div class="header">
            <div class="row mt-5">
                <div class="col-12 col-md-3">
                    <div class="sort" style="width: 80%;">
                        <div class="title d-flex gap-3"><img src="../../assets/images/productsort.webp"
                                alt=""><span>宠物专区</span></div>
                        <ul class="mt-1">
                            <li>猫猫主粮</li>
                            <li>猫猫日用</li>
                        </ul>
                    </div>
                    <div class="referral d-none d-lg-block" style="width: 80%;margin-top: 3rem;">
                        <div class="title d-flex gap-3"><img src="../../assets/images/productreferral.webp"
                                alt=""><span>相关推荐</span></div>
                        <ul class="mt-1 referrallist mt-3">
                            <li v-for="(item, index) in productList.slice(0, 5)" class="col-12 mt-3">
                                <div
                                    class="card h-100 d-flex flex-row justify-content-between align-items-center border-0">
                                    <img class="card-img-top img-fluid" :src="item.imgUrl" alt="hhh">
                                    <div
                                        class="card-body d-flex flex-column justify-content-center align-items-left pt-0 pb-0">
                                        <p class="card-text">{{ item.title }}</p>
                                        <span>￥{{ item.price }}</span>
                                        <h5>立即购买</h5>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>

                </div>

                <!-- 商品列表 -->
                <div class="col-12 col-md-9">
                    <div class="bg mb-4">
                        <img class="img-fluid w-100" src="../../assets/images/productbg.webp" alt="">
                    </div>
                    <div class="products mt-4">
                        <ul class="row g-3">
                            <li v-for="(item, index) in paginatedItems" :key="index" @click="toDetail"
                                class="col-12 col-sm-6 col-md-4 col-lg-3 d-flex flex-column gap-2">
                                <div class="card h-100 align-items-center border-0">
                                    <img class="card-img-top img-fluid" :src="item.imgUrl" :alt="item.name">
                                    <div
                                        class="card-body d-flex flex-column justify-content-between align-items-center">
                                        <p class="card-text">{{ item.title }}</p>
                                        <span>￥{{ item.price }}</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 分页控件 -->
                    <el-pagination background layout="prev, pager, next" :total="productList.length"
                        :page-size="pageSize" :current-page="currentPage" @current-change="handlePageChange"
                        class="mt-4 float-end mb-3" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 商品列表数据
            productList: [{
                id: 1,
                title: '维斯康 VITSCAN宠物保健品海藻颗粒',
                imgUrl: require("../../assets/images/sp1.jpg"),
                price: '98.00'
            }, {
                id: 2,
                title: '小佩饮水机 宠物自动喂食器智能饮水器',
                imgUrl: require("../../assets/images/sp2.jpg"),
                price: '123.00'
            }, {
                id: 3,
                title: '宠物窝猫狗睡袋宠物猫咪垫子四季通用',
                imgUrl: require("../../assets/images/sp3.jpg"),
                price: '28.00'
            }, {
                id: 4,
                title: '乐妃猫爬架 磨爪猫咪玩具宠物休闲娱乐',
                imgUrl: require("../../assets/images/sp4.jpg"),
                price: '45.00'
            }, {
                id: 5,
                title: '怡亲猫砂 除臭膨润土猫沙 宠物猫砂',
                imgUrl: require("../../assets/images/sp5.jpg"),
                price: '99.00'
            }, {
                id: 6,
                title: '猫狗天然植物除耳螨滴耳液耳漂洗耳水',
                imgUrl: require("../../assets/images/sp6.jpg"),
                price: '67.00'
            }],

            // 推荐商品列表数据
            referralList: [{
                id: 1,
                title: '维斯康 VITSCAN宠物保健品海藻颗粒',
                imgUrl: require("../../assets/images/sp1.jpg"),
                price: '98.00'
            }, {
                id: 2,
                title: '小佩饮水机 宠物自动喂食器智能饮水器',
                imgUrl: require("../../assets/images/sp2.jpg"),
                price: '123.00'
            }, {
                id: 3,
                title: '宠物窝猫狗睡袋宠物猫咪垫子四季通用',
                imgUrl: require("../../assets/images/sp3.jpg"),
                price: '28.00'
            }, {
                id: 4,
                title: '乐妃猫爬架 磨爪猫咪玩具宠物休闲娱乐',
                imgUrl: require("../../assets/images/sp4.jpg"),
                price: '45.00'
            }, {
                id: 5,
                title: '怡亲猫砂 除臭膨润土猫沙 宠物猫砂',
                imgUrl: require("../../assets/images/sp5.jpg"),
                price: '99.00'
            }],
            pageSize: 8, // 每页显示的项目数
            currentPage: 1, // 当前页码
        }
    },
    computed: {
        // 计算当前页要显示的数据
        paginatedItems() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.productList.slice(start, end);
        }
    },
    methods: {
        // 处理页码变化事件
        handlePageChange(newPage) {
            console.log('当前页码：', newPage);
            this.currentPage = newPage;
        },

        // 跳转详情页
        toDetail() {
            this.$router.push({
                name: 'productsDetail',
                params: { id: '123' } // 确保传递了 id 参数
            });
        }
    }
}
</script>

<style scoped>
.sort .title {
    position: relative;
    line-height: 1.5em;
    background-color: #000000;
    background-position: left top;
    background-repeat: no-repeat;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 20px;
    padding-left: 20px;
    border-radius: 50px;
    color: white;
    font-size: 15px;
    font-weight: 800;
}

.sort .title img {
    width: 16px;
}

.sort ul {
    width: 90%;
    padding-left: 1.5rem;
}

.sort ul li {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    font-family: 微软雅黑;
    height: 38px;
    line-height: 38px;
    color: #666;
    cursor: pointer;
}

.sort ul li:hover {
    color: rgba(254, 161, 22, 1);
}

.sort ul li:nth-child(1) {
    border-bottom: 1px solid rgba(137, 145, 151, .2);
}

.referral .title {
    position: relative;
    line-height: 1.5em;
    background-color: rgba(254, 161, 22, 1);
    background-position: left top;
    background-repeat: no-repeat;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 20px;
    padding-left: 20px;
    border-radius: 50px;
    color: white;
    font-size: 15px;
    font-weight: 800;
}

.referral .title img {
    width: 16px;
}

.referrallist img {
    width: 80px;
    height: 95px;
}

.referrallist p {
    font-size: 12px;
    font-weight: normal;
    color: #999999;
    font-family: 微软雅黑;
    margin: 0;
}

.referrallist p:hover {
    color: black;
}

.referrallist span {
    font-size: 18px;
    font-weight: normal;
    color: #ff9003;
    font-family: century gothic;
}

.referrallist h5 {
    background-image: none;
    font-size: 12px;
    font-weight: bold;
    color: #333333;
    font-family: 微软雅黑;
    border-color: transparent;
    background-color: transparent;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 1px;
    padding-right: 1px;
}

.products ul {
    padding-left: 0px;
}

.products ul li {
    /* width: 23%; */
    cursor: pointer;
}

.products ul li img {
    width: 232px;
    height: 352px;
}

.products ul li p {
    width: 90%;
    color: #999999;
    font-size: 13px;
    font-family: 微软雅黑;
    font-weight: normal;
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    margin: 0;
}

.products ul li p:hover {
    color: black;
}

.products ul li span {
    color: #ff9003;
    font-size: 18px;
    font-family: century gothic;
}
</style>